<template>
	<view class="center">
    <Top></Top>
		<headTop></headTop>
		<view class="section">

			<view class="">
				<view class="">


					<picker mode="multiSelector" :value="dateTime" @change="changeDateTime"
						@columnchange="changeDateTimeColumn" :range="dateTimeArray">
						<view class='lableBox'>
							<view class="otherCheck"> 开始时间{{timeStr}}</view>
						</view>
					</picker>
				</view>
				<view class="">


					<picker mode="multiSelector" :value="dateTime1" @change="changeDateTime1"
						@columnchange="changeDateTimeColumn1" :range="dateTimeArray">
						<view class='lableBox'>
							<view class="otherCheck"> 结束时间{{timeStr1}}</view>
						</view>
					</picker>
				</view>


				<!-- <picker mode="multiSelector" v-model="date1" @change="bindTimeChange1" format="yyyy-MM-dd HH:mm:ss"  >
					<view class="picker">
						请选择开始时间: {{date1}}
					</view>
				</picker>

				<picker mode="date" v-model="date2" @change="bindTimeChange2">
					<view class="picker">
						请选择结束时间: {{date2}}
					</view>
				</picker> -->
			</view>
			<view class="">
				<button class="cahxun" @click="searchInfo"> 查询</button>
			</view>

		</view>


		<h4>布草信息</h4>

		<view class="table" v-if="isShow">
			<view class="tr">

				<view class="th th3">布草</view>
				<view class="th th3">数量</view>
				<view class="th th3">总计</view>
			</view>
			<!-- 注释部分为左滑操作组件，微信小程序例子中有 -->
			<!-- <mp-slideview wx:for="{{tableData}}" wx:key="index" show="{{false}}" buttons="{{slideButtons}}"
                bindbuttontap="slideButtonTap" data-index="{{item.id}}" data-num='{{item.number}}'> -->
			<scroll-view :style="{height:wh + 'px'}" scroll-y="true">
				<view class="tr" v-for="(item,index) in tableData" :key="index">
					<!-- <view class="td td1">
                    <view>{{index+1}}</view>
                  </view> -->
					<view class="td td3">{{""+item.linenTypeName+item.linenSizeName }}</view>
					<view class="td td3">{{item.num}}</view>
					<view class="td td3">{{item.num}}</view>

				</view>

				<view class="tr">
					<!-- <view class="td td1">
                    <view>{{index+1}}</view>
                  </view> -->
					<view class="td td3"></view>
					<view class="td td3"></view>
					<view class="td td3">{{allNumber}}</view>
				</view>
			</scroll-view>
			<!-- </mp-slideview> -->
		</view>

	</view>
</template>

<script>
	import headTop from "@/components/common/headTop/headTop.vue";
  import Top from "@/pages/pageTop/pageTop.vue"
	export default {
		data() {
			return {
				wh: 0,
				date1: '',
				date2: '',
				date: '2018-10-01',
				time: '12:00',
				timeStr: '',
				timeStr1: '',
				dateTimeArray: null,
				dateTime: '2018-10-01',
				dateTimeArray1: null,
				dateTime1: '2018-10-01',
				startYear: 2000,
				endYear: 2050,
				isShow: false,
				sumNumber: 0,
				tableData: [{}]
			}
		},
		computed: {
			// 总的商品数量
			allNumber() {
				let numberSum = 0
				this.tableData.map(item => {
					numberSum += item.num
				})
				return numberSum
			}
		},
		components: {
			headTop,
		},
		methods: {
			searchInfo() { //查询
				this.getList()
			},

			bindTimeChange1: function(e) { //时间改变
				console.log('picker时间发送选择改变，携带值为', e.detail.value)
				this.date1 = e.detail.value
			},
			bindTimeChange2: function(e) { //时间改变
				console.log('picker时间发送选择改变，携带值为', e.detail.value)
				this.date2 = e.detail.value
			},

			back() {
				uni.navigateBack(-1)
			},
			// 时间格式转换
			times(date) {
				var y = date.getFullYear()
				var m = date.getMonth() + 1
				m = m < 10 ? '0' + m : m
				var d = date.getDate()
				d = d < 10 ? '0' + d : d
				var h = date.getHours()
				h = h < 10 ? '0' + h : h
				var minute = date.getMinutes()
				minute = minute < 10 ? '0' + minute : minute
				var second = date.getSeconds()
				second = second < 10 ? '0' + second : second
				return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second
			},
			getList() {
				// let s = new Date(this.date1)
				// let startTime = s.toISOString()

				// let ss = new Date(this.date2)
				// let endTime = ss.toISOString()

             let hotelId =   this.$store.state.hotelId  
				console.log('请求库存页面接口 linen/queryLinenInfoByItem', {
					"status": 4,
					"startTime": this.timeStr,
					"endTime": this.timeStr1,
					'hotelId': hotelId
				})
      
				this.$request.post('linen/queryLinenInfoByItem', {
					"status": 4,
					"startTime": this.timeStr,
					"endTime": this.timeStr1,
					'hotelId': hotelId
				}).then(res => {
					console.log('接收库存页面接口 linen/queryLinenInfoByItem', res)
					this.tableData = res.data
					this.isShow = true
				})
			},
			withData(param) {
				return param < 10 ? '0' + param : '' + param;
			},
			getLoopArray(start, end) {
				var start = start || 0;
				var end = end || 1;
				var array = [];
				for (var i = start; i <= end; i++) {
					array.push(this.withData(i));
				}
				return array;
			},
			getMonthDay(year, month) {
				var flag = year % 400 == 0 || (year % 4 == 0 && year % 100 != 0),
					array = null;

				switch (month) {
					case '01':
					case '03':
					case '05':
					case '07':
					case '08':
					case '10':
					case '12':
						array = this.getLoopArray(1, 31)
						break;
					case '04':
					case '06':
					case '09':
					case '11':
						array = this.getLoopArray(1, 30)
						break;
					case '02':
						array = flag ? this.getLoopArray(1, 29) : this.getLoopArray(1, 28)
						break;
					default:
						array = '月份格式不正确，请重新输入！'
				}
				return array;
			},
			getNewDateArry() {
				// 当前时间的处理
				var newDate = new Date();
				var year = this.withData(newDate.getFullYear()),
					mont = this.withData(newDate.getMonth() + 1),
					date = this.withData(newDate.getDate()),
					hour = this.withData(newDate.getHours()),
					minu = this.withData(newDate.getMinutes()),
					seco = this.withData(newDate.getSeconds());

				return [year, mont, date, hour, minu, seco];
			},
			dateTimePicker(startYear, endYear, date) {
				// 返回默认显示的数组和联动数组的声明
				var dateTime = [],
					dateTimeArray = [
						[],
						[],
						[],
						[],
						[],
						[]
					];
				var start = startYear || 2000;
				var end = endYear || 2100;
				// 默认开始显示数据
				var defaultDate = date ? [...date.split(' ')[0].split('-'), ...date.split(' ')[1].split(':')] : this
					.getNewDateArry();
				// 处理联动列表数据
				/*年月日 时分秒*/
				dateTimeArray[0] = this.getLoopArray(start, end);
				dateTimeArray[1] = this.getLoopArray(1, 12);
				dateTimeArray[2] = this.getMonthDay(defaultDate[0], defaultDate[1]);
				dateTimeArray[3] = this.getLoopArray(0, 23);
				dateTimeArray[4] = this.getLoopArray(0, 59);
				dateTimeArray[5] = this.getLoopArray(0, 59);

				dateTimeArray.forEach((current, index) => {
					dateTime.push(current.indexOf(defaultDate[index]));
				});
				return {
					dateTimeArray: dateTimeArray,
					dateTime: dateTime
				}
			},
			/**格式化日期 */
			generateTimeStr(dateTimeArray, dateTime) {
				const timeStr =
					dateTimeArray[0][dateTime[0]] +
					"-" +
					dateTimeArray[1][dateTime[1]] +
					"-" +
					dateTimeArray[2][dateTime[2]] +
					" " +
					dateTimeArray[3][dateTime[3]] +
					":" +
					dateTimeArray[4][dateTime[4]] +
					":" +
					dateTimeArray[5][dateTime[5]];
				return timeStr;
			},
			initTime() {
				let date = new Date();
				let endYear = date.getFullYear();
				// 获取完整的年月日 时分秒，以及默认显示的数组
				let obj = this.dateTimePicker(this.startYear, endYear);
				// 精确到分的处理，将数组的秒去掉
				// let lastArray = obj.dateTimeArray.pop();
				// let lastTime = obj.dateTime.pop();

				this.dateTimeArray = obj.dateTimeArray
				this.dateTime = obj.dateTime
				this.dateTime1 = obj.dateTime
			},
			changeDateTime(e) {
				console.log("时间", e, this.timeStr)
				this.dateTime = e.detail.value;
				this.timeStr = this.generateTimeStr(this.dateTimeArray, this.dateTime);
				console.log("时间", e, this.timeStr)
				//ios时间不能用'-'解析成时间戳



			},
			changeDateTime1(e) {
				this.dateTime1 = e.detail.value;
				this.timeStr1 = this.generateTimeStr(this.dateTimeArray, this.dateTime1);
				console.log("时间", e, this.timeStr1)
				//ios时间不能用'-'解析成时间戳
			},
			/*年,月切换时重新更新计算*/
			changeDateTimeColumn(e) {
				//let {id} = e.target;
				let {
					column,
					value
				} = e.detail;
				if (column == 0 || column == 1) {
					//直接修改数组下标视图不更新,用深拷贝之后替换数组
					let dateTime = JSON.parse(JSON.stringify(this.dateTime));
					let dateTimeArray = JSON.parse(JSON.stringify(this.dateTimeArray));
					dateTime[column] = value;
					dateTimeArray[2] = this.getMonthDay(dateTimeArray[0][dateTime[0]], dateTimeArray[1][dateTime[1]]);
					this.dateTime = dateTime;
					this.dateTimeArray = dateTimeArray;
				}
			},
			changeDateTimeColumn1(e) {
				//let {id} = e.target;
				let {
					column,
					value
				} = e.detail;
				if (column == 0 || column == 1) {
					//直接修改数组下标视图不更新,用深拷贝之后替换数组
					let dateTime = JSON.parse(JSON.stringify(this.dateTime1));
					let dateTimeArray = JSON.parse(JSON.stringify(this.dateTimeArray));
					dateTime[column] = value;
					dateTimeArray[2] = this.getMonthDay(dateTimeArray[0][dateTime[0]], dateTimeArray[1][dateTime[1]]);
					this.dateTime1 = dateTime;
					this.dateTimeArray = dateTimeArray;
				}
			},




		},
		onShow() {
			this.isShow = false
		},
		onLoad() {
			let sys = uni.getSystemInfoSync()
			let times = new Date()
			// const tmpMonth = parseInt(times.getMonth() + 1)
			// // let isoDate = times.toISOString();
			// let month = tmpMonth ? "0" + tmpMonth : "" + tmpMonth;
			// const tmpDate = parseInt(times.getDate())
			// let date = tmpDate < 10 ? "0" + tmpDate : "" + tmpDate
			// let tim = times.getFullYear() + '-' + month + '-' + date

			this.initTime()
			this.timeStr = "2023-01-01 00:00:00";
			this.timeStr1 = this.times(times)
			this.wh = sys.windowHeight - 200

		},
	}
</script>

<style scoped lang="scss">
	.center {
		background-color: rgb(242, 242, 242);
		height: 100vh;

		h4 {
			text-align: center;
			margin-top: 40rpx;
			padding: 15rpx;
		}

		.orderInfo {
			margin-left: 4rpx;
			padding: 5rpx 0;

			p {
				padding-left: 10rpx;
			}
		}
	}

	.table {
		// border: 1rpx solid #dadada;
		border-right: 0;
		border-bottom: 0;
		width: 98%;
		margin-left: 1%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: column;
		box-sizing: border-box;
	}

	.tr {
		width: 100%;

		display: flex;
		justify-content: center;
	}

	.th,
	.td {
		padding: 10rpx;
		box-sizing: border-box;
		// border-bottom: 1rpx solid #dadada;
		// border-right: 1rpx solid #dadada;
		background-color: #fff;
		border: 1rpx solid #dadada;
		text-align: center;
	}

	.th3,
	.td3 {
		width: 30%;
	}

	.th {
		font-weight: 800;
		background-color: rgba(48, 144, 255, 0.3);
		font-size: 28rpx;
		color: #333;
	}

	.td {
		font-size: 26rpx;
		color: #333;
	}

	.section {
		height: 100rpx;
		margin-top: 15rpx;

		picker {
			padding: 10rpx 0;
		}

		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.cahxun {
		justify-content: flex-end;
		// float: right;
		// position: fixed;
		// top: 188rpx;
		// right: 26rpx;
	}

	.otherCheck {
		width: 100%;
	}
     
</style>